<template>
  <el-drawer
    :title="title"
    v-model="visible"
    :direction="direction"
    :size="800"
    :before-close="beforeClose"
  >
    <section class="drawer-main">
      <div class="drawer-main-query">
        <el-input
          class="input"
          placeholder="请输入搜索条件"
          v-model="query.search"
          @input="queryChange"
        >
          <template #append>
            <el-button @click="refresh" :icon="Search" />
          </template>
        </el-input>
      </div>
      <!-- 表格 -->

      <DynamicTable
        ref="DynamicTable"
        class="table-container"
        :total="total"
        v-model:current="query.current"
        v-model:size="query.size"
        :data="list"
        :columns="columns"
        :background="false"
        @pagination="getList"
      />
    </section>

    <footer class="drawer-footer">
      <el-button @click="beforeClose">取 消</el-button>
      <el-button type="primary" @click="submit" :loading="loading">
        确 定
      </el-button>
    </footer>
  </el-drawer>
</template>

<script>
import { defineComponent, watch, reactive, ref } from "vue";
import { ElMessage } from "element-plus";
import { useEditDrawer } from "@/hooks";
import { Search } from "@element-plus/icons-vue";
import { useRoute } from "vue-router";
import DynamicTable from "@/components/DynamicTable";

export default defineComponent({
  name: "AddAuthDrawer",
  emits: ["update:modelValue", "update-list", "save"],
  components: { DynamicTable },
  props: {
    modelValue: {
      type: Boolean,
      default: false,
    },
    columns: {
      type: Array,
      default: () => [],
    },
    title: {
      type: String,
      default: "",
    },
    // create 新增， update 修改
    type: {
      type: String,
      default: "create",
    },
    getItems: {
      type: Function,
    },
  },
  setup(props, { emit }) {
    const route = useRoute();
    const query = reactive({
      appId: route.params.id,
      search: null,
      current: 1,
      size: 20,
    });
    const DynamicTable = ref(null);
    // 获取抽屉基础的参数
    const { visible, direction, loading, beforeClose } = useEditDrawer({
      createApi: null,
      props,
      emit,
    });
    // 提交
    const submit = async () => {
      const checkedRows = DynamicTable.value.$getMultipleSelection();
      if (checkedRows.length === 0) {
        ElMessage.warning("请勾选您要新增的接口");
      } else {
        loading.value = true;
        emit("save", checkedRows);
        loading.value = false;
      }
    };
    const list = ref([]);
    const total = ref(0);
    const getList = async (pageNumber = 1, size = 20) => {
      query.current = pageNumber;
      query.size = size;
      const {
        status,
        message,
        data: { list: listData, total: totalCount },
      } = await props.getItems({ ...query });
      if (status === 200) {
        list.value = listData;
        total.value = totalCount;
      } else {
        ElMessage.warning(message);
      }
    };
    const refresh = () => {
      getList();
    };
    const queryChange = () => {
      query.current = 1;
      getList();
    };
    // 显示时请求列表
    watch(visible, (value) => {
      if (value) {
        query.current = 1;
        query.search = null;
        getList();
      }
    });

    return {
      getList,
      Search,
      list,
      total,
      query,
      loading,
      visible,
      direction,
      beforeClose,
      submit,
      queryChange,
      refresh,
      DynamicTable,
    };
  },
});
</script>

<style lang="scss" scoped>
$height: 50px;
.drawer-main {
  height: calc(100vh - 160px);
  padding: 0 20px;
  overflow: auto;
}
.drawer-footer {
  text-align: right;
  height: $height;
  line-height: $height;
  padding: 0 20px;
}
</style>